<template>
   <div class="syslog">
       <h4>统计订单</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div style="margin-bottom:14px;">
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                起止时间：
                                <el-date-picker
                                    v-model="tradeTime"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期" style="width:350px;"
                                    value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                            </div>
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                供应商：
                                <el-input clearable
                                    placeholder="请输入供应商"
                                    v-model="supplyName" class="filter-input"
                                     @keyup.enter.native="search()">
                                </el-input>
                            </div>
                             <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                供应商手机号：
                                <el-input clearable
                                    placeholder="请输入供应商手机号"
                                    v-model="linkTel" class="filter-input"
                                     @keyup.enter.native="search()">
                                </el-input>
                            </div>
                            <el-button type="primary" @click="search()">搜索</el-button>
                    </div>           
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px;padding:30px 0 10px 0;">
            <div style="padding: 0 30px;">
             <el-table v-loading="loading" :data="data" border style="width: 100%;" ref="multipleTable" >
                 <el-table-column  type="index"  width="60" label="序号" align="center" :index="indexMethod"></el-table-column>
                 <el-table-column prop="date" label="时间" width="120" align="center"></el-table-column>
                 <el-table-column prop="supplyName" label="供应商" width="180" align="center" >
                </el-table-column>
                <el-table-column prop="farmerTel" label="手机号" width="150" align="center"></el-table-column>
                <el-table-column prop="orderNum" label="总订单数（笔）" align="center"  width="150">
                </el-table-column>
                <el-table-column prop="totalWeight" label="总斤数（斤）" align="center" width="150">
                </el-table-column>
                <el-table-column prop="receivableMoney" label="订单应收入" align="center"  width="150">
                </el-table-column>
                <el-table-column prop="orderRefund" label="订单总退款" align="center" width="150">
                </el-table-column>
                <el-table-column prop="orderRealIncome" label="订单实际收入" align="center" width="150">
                </el-table-column>
                <el-table-column label="操作"  align="center" width="230">
                <template slot-scope="scope">
                     <span @click="handleEdit(scope.row.farmerId,scope.row.date)" class="blue">查看{{scope.row.id}}</span>
                     <span @click="handleEdit(scope.row.farmerId,scope.row.date)" style="margin-left:15px;">核对</span>
                    <!--  <span @click="handleEdit(scope.row.id)" class="blue">查看详情</span> -->
                </template>
                </el-table-column>
             </el-table> 
            </div>
             <div class="pagination" style="padding:20px 30px 10px 20px;border-top:1px solid #ddd;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="getPageNum"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
      </div>
  </div>  
</template>

<script>
import { orderCounte } from '@/request/api'
export default {
    data(){
        return {
           loading:true,
           data: [],
        //    orderList:{
            tradeTime:'',  // 起止时间
            linkTel:'',    // 供应商的手机号
            supplyName:'',//供应商
            orderNum:'',//总订单数（笔）
            totalWeight:'',//总斤数（斤）
            receivableMoney:'',//订单应收入
            orderRefund:'',//订单总退款
            orderRealIncome:'',//订单实际收入
            pageNum:1,
            pageSize:10,
            total:0,//总数据
            // }
            orderList:'',
            
         }
    },
    created(){
        this.get_tradeList();
    },
    methods:{
      indexMethod(index) {
        return   this.pageSize*(this.pageNum-1) + 1 + index;
      },
      getPageNum(e){
        //   当前页 
         this.pageNum = e;
         this.get_tradeList();
      },
      handleSizeChange(e){
        this.pageSize = e;
        this.get_tradeList();
      },
      formatter(row, column){
         return row.address
      },
      handleEdit(id,date){
          console.log(id)
          this.$router.push({
              path:`/orderCount/orderWatch/${id}/${date}`,
          }) 
      },
      search(){
          this.get_tradeList();
      },
      get_tradeList(){
          orderCounte({
             farmerTel:this.linkTel,        // 供应商的联系方式
             startTime: (this.tradeTime && this.tradeTime[0]) || '', // 开始时间
             endTime: ( this.tradeTime && this.tradeTime[1] ) || '',  // 结束时间
             farmerName:this.supplyName,//供应商
             pageNum:this.pageNum,
             pageSize:this.pageSize
          }).then(res => {
              this.total = res.total;
              this.data = res.rows;
            //   for(var i=0;i<res.rows.){

            //   }
              this.loading = false;
          })
      }
    }
 }
</script>
<style  scoped>
.syslog {
        width:100%;
        height: 100%;
}
.syslog h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}
.blue{
    color:blue;
}
</style>